<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>
<html>
<head>
    <title>结算 - Cooking Account</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/cooking-main.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="page">
    <div id="header_menu">
        <a class="offline-button" href="../overview" id="record">首页</a>
        <a class="offline-button" href="real_time" id="settlement">实时信息</a>
    </div>
    <div>
        请勾选需要结算的账务记录,然后点击'提交结算'按钮;
        当前记录的金额:<strong>${settlementFormDto.recordedAmount}</strong>元,共<strong>${settlementFormDto.accountSize}</strong>条数据.
        &nbsp;<a href="history">结算历史</a>
    </div>
    <div id="grid_container">
        <form:form commandName="settlementFormDto">
            <table cellpadding="0" cellspacing="0" class="default-table">
                <tr>
                    <th class="default-table-header"><input type="checkbox" id="all_checkbox"/></th>
                    <th class="default-table-header" style="width:15%;">日期</th>
                    <th class="default-table-header" style="width:10%;">金额</th>
                    <th class="default-table-header" style="width:15%;">记录人</th>
                    <th class="default-table-header" style="width:10%;">状态</th>
                    <th class="default-table-header" style="width:45%;">描述</th>
                </tr>
                <c:forEach items="${settlementFormDto.accounts}" var="account" varStatus="i">
                    <tr class="${i.count%2 ==0?'odd':''}">
                        <td><input type="checkbox" name="accountGuids" value="${account.guid}"/></td>
                        <td>${account.date}</td>
                        <td>${account.amount}</td>
                        <td>${account.creatorName}</td>
                        <td>${account.status}</td>
                        <td>${account.description}</td>
                    </tr>
                </c:forEach>
                <c:if test="${empty settlementFormDto.accounts}">
                    <tr>
                        <td colspan="6">没有任何可结算的账务.</td>
                    </tr>
                </c:if>
            </table>
        </form:form>
    </div>
    <div>
        <a href="javascript:void(0);" class="form-button" id="submit_">提交结算</a>
        &nbsp;<a href="../overview">取消</a>
    </div>
</div>
<script>
    $(function () {

        $("#all_checkbox").click(function () {
            if ($(this).attr("checked")) {
                $("input[name='accountGuids']").attr("checked", true);
            } else {
                $("input[name='accountGuids']").attr("checked", false);
            }
        });

        $("#submit_").click(function () {
            if ($("input[name='accountGuids']:checked").length > 0) {
                if (confirm("确认提交结算?")) {
                    $("form").submit();
                }
            } else {
                alert("请至少勾选一条账务信息");
            }
        });
    });
</script>
</body>
</html>